<template>
    <div class="content">
      <el-row class="bgW" v-if="!clienId">
        <el-col :span="22">
          <el-form class="search" :inline="true" size="mini" :model="search">
            <el-form-item label="姓名/手机号">
              <el-input
                v-model="search.customer_name_or_telephone"
                maxlength="30"
                class="w160"
                placeholder="请输入姓名或手机号"
                clearable
              />
            </el-form-item>
        
          </el-form>
        </el-col>
        <el-col :span="2" style="text-align: right;">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList('search')">搜索</el-button>
        </el-col>
      </el-row>
      <div class="accountCon">
        <div class="btnBox">
          <div v-if="clienId"></div>
          <el-button
            type="primary"
            v-if="!clienId && !userInfo.shop_id"
            :disabled="!idList.length"
            class="mb10"
            size="mini"
            @click="hint('导出选中列表','')"
          >导出数据</el-button>
          <div v-if="userInfo.shop_id"></div>
          <!--  -->
        </div>
        <!--列表-->
        <el-row>
          <el-col :span="24">
            <el-table
              :data="list"
              size="small"
              border
              :cell-style="$style.cellStyle"
              :header-cell-style="$style.rowClass"
              @selection-change="handleSelectionChange"
            >
              <ElTableColumn v-if="!clienId && !userInfo.shop_id" type="selection" width="50" />
              <ElTableColumn label="门店名称" prop="shop_name" />
              <ElTableColumn label="顾客姓名" prop="customer_name" />
              <ElTableColumn label="卡项名称" prop="service_name" />
              <ElTableColumn label="申请人" prop="apply_uid_name" />
              <ElTableColumn label="申请时间" prop="apply_time" />
              <ElTableColumn label="申请类型" prop="apply_type" />
              
              <ElTableColumn label="卡项消耗申请状态" width="260">
                <template slot-scope="{ row }">
                  <span @click="applyDetails(row)" >
                    {{row.status_text }}
                  </span>
                </template>
              </ElTableColumn>
              <ElTableColumn label="审核" fixed="right">
                <template slot-scope="{ row }">
                  <span  v-if="row.status ==1 && row.is_show_audit == 1" class="theme" @click="tapBtn('',row)">审 核</span>
                </template>
              </ElTableColumn>
            </el-table>
            <pagination
              class="page tc mt10"
              :total="page.total"
              :page.sync="page.page"
              :limit.sync="page.limit"
              @pagination="getList"
            />
          </el-col>
        </el-row>
      </div>
  
      <!-- 审核弹框 -->
      <el-dialog title="审 核" :visible.sync="isAuditPop" width="40%">
        <el-form
          ref="isAudit"
          size="mini"
          :model="isAudit"
          label-width="150px"
        >
          <el-form-item label="是否通过">
            <el-radio-group v-model="isAudit.is_pass">
              <el-radio label="1">通过</el-radio>
              <el-radio label="2">驳回</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="备 注" style="margin-top: 3%;">
            <el-input type="textarea" v-model="isAudit.remark" style="width: 300px;"></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="isAuditPop = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="submitFormC()">确 定</el-button>
        </span>
      </el-dialog>
      <!--  -->

      <!-- 卡项消耗审核流程弹窗 --> 
      <el-dialog
        title="卡项消耗审核流程"
        :visible.sync="applyPop"
        width="40%"
        >
        <div class="block">
          <el-timeline>
            <el-timeline-item timestamp="" placement="top" v-if = "auditDetail.type ==1 || auditDetail.type ==2 || auditDetail.type ==5 " >
              <el-card>
                <h4>申请时间:{{ auditDetail.create_time }}</h4>
                <p>申请人：{{ auditDetail.apply_audit_name }}</p>
                <p>申请原因：{{auditDetail.apply_reason}}</p>
                <p v-if = "auditDetail.type ==5" >类型：<span style="color:red">卡项消耗恢复</span></p>
                <p >审核状态：<span style="color:red">审核中</span></p>
                <p >卡项信息如下：</p>
                <p >
                  卡项名称：{{auditDetail.service.service_name}}
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  卡项类型：{{auditDetail.service.service_type}}
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  开卡金额：{{auditDetail.service.kk_money}}
                </p>
                <p >
                  已消耗本金：{{auditDetail.service.already_consume_bj}}
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  已消耗赠金：{{auditDetail.service.already_consume_zj}}
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  已消耗店转：{{auditDetail.service.already_consume_dz}}
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  已核销次数：{{auditDetail.service.already_cancel_num}}
                </p>

                <p v-if=" auditDetail.service.service_type == '次卡'">
                卡项次数：{{auditDetail.service.num}}
                </p>
                <p v-if=" auditDetail.service.service_type == '疗程卡'">
                  卡项有效期：{{auditDetail.service.start_time}}至{{auditDetail.service.end_time}}
                </p>

              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="" placement="top" v-if = "auditDetail.type==3 || auditDetail.type ==4 " >
              <el-card>
                <h4>申请时间:{{ auditDetail.create_time }}</h4>
                <p>申请人：{{ auditDetail.apply_audit_name }}</p>
                <p>申请原因：{{auditDetail.apply_reason}}</p>
                <p >审核状态：<span style="color:red">审核中</span></p>
                <p style="color:red">顾客申请预存{{auditDetail.apply_test}}如下</p>
                <el-table
                  :data="auditDetail.balance"
                  border
                  height="200"
                  show-summary
                  style="width: 100%; margin-top: 20px">
                  <el-table-column
                    prop="type_name"
                    label="类型">
                  </el-table-column>
                  <el-table-column
                    prop="money"
                    label="本金">
                  </el-table-column>
                  <el-table-column
                    prop="complimentary_money"
                    label="赠金">
                  </el-table-column>
                  <el-table-column
                    prop="shop_transfer_money"
                    label="店转">
                  </el-table-column>
                </el-table>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="" placement="top"  v-for="(item) in auditDetailList ">
              <el-card>
                <h4>审核时间:{{ item.apply_audit_time }}</h4>
                <p>审核人：{{ item.apply_audit_name }}</p>
                <p>审核备注：{{item.apply_audit_reason}}</p>
                <p style="color:red">审核状态：{{item.is_pass_test }}</p>
              </el-card>
            </el-timeline-item>

          </el-timeline>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { mapGetters } from "vuex";
  import pagination from "@/components/Pagination";
  import {
    audit,
    applyList,
    auditDetail
  } from "@/api/serviceConsume";
  class Search {
    customer_name_or_telephone = "";
    source_id = "";
    user_name = "";
    yjreturn_visit_time = "";
    yjreturn_visit_time2 = "";
  }
  class VisitDetail {
    customer_id = "";
    shop_id = "";
    yjreturn_visit_time = "";
    yjreturn_visit_content = "";
  }
  class Rules {
    customer_id = [{ required: true, message: "请选择客户", trigger: "change" }];
    yjreturn_visit_time = [
      { required: true, message: "请选择预约回访日期", trigger: "change" }
    ];
    yjreturn_visit_content = [
      { required: true, message: "请填写预约回访内容", trigger: "blur" }
    ];
  }
  class Options {
    client = [];
    source_id = [];
  }


  class Page {
    total = 0;
    page = 1;
    limit = 10;
  }
  
  class isAudit {
    is_pass = '1';
    remark = '';
  }
  export default {
    name: "ClientList",
    components: {
      pagination
    },
    props: {
      clienId: {
        type: String,
        default: ""
      },
      detail: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        page: new Page(),
        search: new Search(),
        options: new Options(),
        visitDetail: new VisitDetail(),
        isAudit: new isAudit(),
        isAuditPop: false, // 审核弹框
        rules: new Rules(),
        list: [],
        idList: "",
        visitClient: false,
        loading: false,
        applyPop:false,
        auditDetailList :[],
        auditDetail:{}
      };
    },
    filters: {
      statusFilter(val) {
        return ["启用", "禁用"][+val];
      }
    },
    computed: {
      ...mapGetters(["userInfo"])
    },
    mounted() {
      this.getOptions();
      this.getList();
    },
    methods: {
      //查看卡项消耗申请详情
      applyDetails(row){
         
          auditDetail({
              id : row.id,
             
            }).then(res => {
              this.auditDetail = res.data.apply;
              this.auditDetailList = res.data.audit;
              console.log(res);
              this.applyPop = true;
            });
      },
      // 获取选项
      getOptions() {
        // ssettingList({ page: 1, limit: 100000 }).then(res => {
        //   let that = this;
        //   res.list.forEach(function(item) {
        //     if (item.category_id == 4) {
        //       that.options.source_id.push(item);
        //     }
        //   });
        // });
      },
  
      // 选择客户
      changeCustomer(e) {
        this.options.client.forEach(item => {
          if (e == item.id) {
            this.visitDetail.shop_id = item.shop_id;
          }
        });
      },
      // 获取列表
      getList(option) {
        if (option === "search") this.page = new Page();
        applyList({
          ...this.search,
          ...this.page
        }).then(res => {
          this.list = res.data.list;
          this.page.total = res.data.dataCount;
        });
      },
      // 添加定时回访
      addVistListPo() {
        this.visitClient = true;
        this.visitDetail.yjreturn_visit_time = "";
        this.visitDetail.yjreturn_visit_content = "";
      },
  
      // 确定提交
      confirm(type, val) {
        if (type == "add") {
  
        } else {
  
        }
      },
  
      // 跳转按钮
      tapBtn(routerName, row) {
        console.log(row.update_id);
  
        this.isAuditPop = true;
        this.isAudit = new isAudit();
        this.isAudit.id = row.id;
      },
  
      // 审核提交
      submitFormC(formName) {
          const loading = this.$loading({
            lock: true,
            text: "提交中，请稍后...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
        audit({
          ...this.isAudit,
        }).then(res => {
          loading.close();
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.isAuditPop = false;
          this.getList();
        }).catch(err => {
           loading.close();
        });;
      },
  
      // 提示
      hint(type, text) {
        this.$confirm(`${text}，是否确定？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            if (type == "change") {
              this.submitFormC(); 
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      // 改变表格选中状态
      handleSelectionChange(val) {
        this.idList = val.map(i => {
          return i.id;
        });
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .mainColor {
    color: #2dc0a3;
  }
  .content {
    height: calc(100% - 56px);
    overflow-y: auto;
  }
  .bgW {
    background: #fff;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 20px;
  }
  
  .el-form-item {
    margin: 0px 20px 3px 0;
  }
  .accountCon {
    background: #fff;
    padding: 0px 10px 30px;
    .btnBox {
      display: flex;
      justify-content: space-between;
    }
    .entryBox {
      height: 600px;
      overflow-y: scroll;
      .entryRow1 {
        display: flex;
        .item-circle {
          width: 18px;
          height: 18px;
          z-index: 2;
          border-radius: 9px;
          background-color: white;
          border: 5px solid #a5ecd7;
        }
        .clientName {
          line-height: 30px;
          font-size: 16px;
          font-weight: bold;
        }
      }
      .entryRow2 {
        color: #999;
        margin: 10px 0 0 20px;
        display: flex;
        font-size: 14px;
      }
      .entryRow3 {
        color: #444;
        margin: 10px 0 20px;
        font-size: 15px;
      }
    }
    ::-webkit-scrollbar {
      display: none;
    }
  }
  .frame {
    .el-form-item {
      margin: 0px 20px 26px 0;
    }
  }
  .footerBtn {
    text-align: right;
  }
  </style>
  